<template>
    <div>
        <div class="container" :style ="note">
            <!-- <div class="img-box">
                <img :src="bg_img" alt="" class="bg-img">
            </div> -->
            <div class="table-box">
                <div class="table-title">
                    <span>银行名称</span>
                    <span>单笔(元)</span>
                    <span>单日(元)</span>
                    <span>单月(元)</span>
                </div>
                <div class="table-list-box">
                    <div v-for="(item,index) in tables" :key="index" :class="index %2 == 0 ? 'table-list-one':'table-list-two'">
                        <span>{{item.bankName}}</span>
                        <span>{{item.singleQuota}}</span>
                        <span>{{item.singleDayLimit}}</span>
                        <span>{{item.monthlyLimit}}</span>
                    </div>
                </div>
            </div>
            <div class="footer-box">
                <img :src="footer_img" alt="" class="footer-img">
            </div>
        </div>
    </div>
</template>
<script>
import $                                                from "jquery";
import { Toast }                                        from 'mint-ui';
import ApiConfig                                        from '../config/api.config';
export default {
    data(){
        return{
            footer_img:require("../assets/backgroundImgFooter.png"),
            note: {
                backgroundImage: "url(" + require("../assets/backgroundImgHead.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "100%",
                minHeight:"563px"
            },
            tables_sort:[],
            tables:[]
        }
    },
    mounted(){
        document.querySelector('body').setAttribute('style', 'background-color:#0B0F11')
        this.channel();
    },
    methods:{
        //sort_number排序
        sortNumber(a,b){
            return a.sortNumber - b.sortNumber;
        },
        //通道列表请求
        channel(){
            if(localStorage.getItem('operatorNo')!=undefined){
                this.CHANNEL_LIST = `${ApiConfig.CHANNEL_LIST}`;
                this.$fetch(this.CHANNEL_LIST,'get',{
                    operatorNo:localStorage.getItem('operatorNo'),
                    id:localStorage.getItem('ids')
                })
                .then((res) => {
                    // console.log(res)
                    for(var i=0;i<res.result.length;i++){
                        this.tables.push(res.result[i])
                    }
                    //this.sorting();
                })
                .catch(err => {
                    Toast({
                        message: '请求失败，请退出重试！',
                    });
                })  
            }else{
                Toast({
                    message: 'operatorNo为空！',
                });
            }
        },
        //根据sort_number 排序进行排序
        sorting(){
            var arr=[];
            for(var i=0;i<this.tables.length;i++){
                arr.push(this.tables[i])
            }
            this.tables_sort=arr.sort(this.sortNumber);
        }
    }
}
</script>
<style lang="less" scoped>
.container{
    width: 100%;
    overflow: hidden;
    .table-box{
        width: 88.8%;
        margin: 152px 5.6% 0 5.6%;
        float: left;
        .table-title{
            width: 100%;
            height: 40px;
            float: left;
            background-color: #DD3434;
            padding: 0 16px;
            box-sizing: border-box;
        }
        .table-title>span{
            display: inline-block;
            width: 25%;
            height: 100%;
            line-height: 40px;
            font-size: 12px;
            font-family: PingFangSC-Regular;
            color:#FFFFFF;
            letter-spacing: -0.29px;
            float: left;
            text-align: center;
        }
        .table-list-box{
            width: 100%;
            .table-list-one,.table-list-two{
                width: 100%;
                float: left;
                padding: 0 16px;
                box-sizing: border-box;
                background-color: #1e1e1e;
                opacity: 0.8;
                /* 子元素在父元素中垂直居中 */
                align-items:center; 
                display: -webkit-flex;
            }
            .table-list-two{
                background-color: #363636;
                
            }
            .table-list-one>span,.table-list-two>span{
                display: inline-block;
                width: 25%;
                font-size: 12px;
                font-family: PingFangSC-Regular;
                color:#FFFFFF;
                letter-spacing: -0.29px;
                float: left;
                text-align: center;
                padding: 12px 0;
                box-sizing: border-box;
            }
        }
    }
    .footer-box{
        width: 100%;
        height: 120px;
        float: left;
        .footer-img{
            display: inline-block;
            float: left;
            width: 100%;
            height: 100%;
        }
    }
}
</style>